<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content" >
                    <div>
                        <span class="preview-title" v-text="courseName"></span>
                        <span class="preview-line">/</span>
                        <span v-text="chapterName"></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="jx-contain" >
            <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe> -->
            <div class="sideBox">
                <ul>
                    <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li>
                    <li @click="openNoteWindow" v-if="displayVersion != ''"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                </ul>
            </div>
            <div class="jx-content" v-if="displayVersion">
                <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" :src="displayVersion" frameborder="0"></iframe> -->
                <!-- yx 修改因为界面不显示 -->
                <div class=" markdown-body editormd-preview-container" v-html="displayVersion"></div>
            </div>
            <div class="no-data-tips" v-else>
                <img src="./../../../assets/images/index_no_data.png" />
                <p>暂无内容</p>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
            title="视频"
            :visible.sync="dialogVisible2"
            width="40%"
            @close='closeVideoDialog'
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            >
            <video id="video" autoplay controls class="videoShow" disablePictureInPicture  controlslist="nodownload" :src="videoUrl" ></video>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div class="el-dialog__wrapper" id="onlyDialog">
            <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">批注</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import $ from "jquery";

    export default{
        data(){
            return {
                displayVersion: '',
                wid:0,
                hei:0,
                // 视频地址
                videoUrl:'',
                // 视频地址防关闭
                videoUrlCopy:'',
                dialogVisible1: false,
                // 视频显示隐藏
                dialogVisible2: false,
                // 学习笔记值
                noteVal:'',
                // 课程名称
                courseName: '',
                // 章节名称
                chapterName: ''
            }
        },
        created () {
            let self = this
            // 课程ID
            self.coursesId = self.$route.query.courseId
            // 章节ID
            self.ChapterId = self.$route.query.chapterId
            // 初始化获取资源
            self.InitGetResource()
            // 初始化头部信息
            self.InitHeaderInfo()
        },
        methods:{
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化获取资源
            InitGetResource() {
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/detail/resource?type=2').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.preparationMaterials.displayVersion.length > 0) {
                            self.displayVersion = res.data.preparationMaterials.displayVersion[0].htmlContent
                        }
                        self.theoryVideoData = res.data.theoryVideo.displayVersion
                        // self.videoUrl = res.data.theoryVideo.displayVersion[0].filePath
                        if (res.data.theoryVideo.displayVersion.length > 0) {
                            self.videoUrlCopy = res.data.theoryVideo.displayVersion[0].filePath
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 打开笔记获取笔记信息
            openNoteWindow(){
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=2&pageNumber=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.noteVal = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                $("#onlyDialog").show()
            },
            // 关闭笔记
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            // 学习笔记保存
            NoteSave(){
                let self = this
                self.$http.post('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/resource/notes',{
                    notesType: 2,
                    pageNumber: 1,
                    content: self.noteVal
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        $("#onlyDialog").hide()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 视频弹窗
            videoDialog(){
                let self = this
                self.videoUrl = self.videoUrlCopy
                self.dialogVisible2 = true
            },
            // 关闭视频弹窗
            closeVideoDialog() {
                let self = this
                self.videoUrl = ''
            }
        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = '100%';
            this.hei = screenHeight - 200;
        }
    }
</script>
<style lang="scss">
    .el-dialog__wrapper{
        box-shadow: 0px 0px 20px #4a4a4a42
    }
    #onlyDialog{
        .el-dialog{
            box-shadow: 0px;
            .el-dialog__footer{
                text-align: center;
            }
            .el-textarea{
                textarea{
                    resize: none;
                }
            }
        }
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
 .preview-top {
    height: 60px;
    margin: 0 auto;
    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        z-index: 99;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        // height: 396px;
        width: 490px;
        position: fixed;
        left: initial;
        top: 150px;
        bottom: initial;
        right: 95px;
        display: none;
        z-index: 1;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;

    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    //主体
    #jx-contain{
        position: relative;
        .jx-content{
            margin-top: 40px;
        }
        .sideBox{
            position: fixed;
            top:100px;
            right:25px;
            width: 60px;
            height: 160px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            .sideBoxActive{
                color: #6d6d6d;
                pointer-events: none;
                cursor: default;
                opacity: 0.6;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;
                    color: #6d6d6d;
                }
            }
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 20px auto 44px;
                position: relative;
                cursor: pointer;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;

                }

            }
        }
        // 暂无数据
        .no-data-tips{
            padding-top: 10%;
            text-align: center;
            &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
    }
</style>
